
<template>
  <!-- <gotoSearch /> -->
  <!-- v-if="showViewData === 'Cart'" -->
  <div class="cart" v-if="CartList.length > 0">
    <div v-if="true">
      <div class="cartMain">
        <!-- 标题 -->
        <div class="cartTitle">
          <div class="cartTitle1">全场换购</div>
          <!-- <div class="cartTitle1">全场换购</div> -->
          <div class="cartTitle2">已满一件,可选择10件商品换购</div>
          <div class="cartTitle3">
            <a href="">去换购 ></a>
          </div>
        </div>
        <!-- 滑动单元格 -->
        <div class="bad ">
          <van-swipe :loop=true v-if="CartList">
            <van-swipe-item v-for="(item, index ) in CartList" :key="index" :num="item.skuNum">
              <van-card :price="item.cartPrice" :desc="item.sourceType" :title="item.skuName" class="goods-card"
                :thumb="item.imgUrl" />
            </van-swipe-item>
            <van-card centered:true title="查看全部 >" class="goods-card1"></van-card>
          </van-swipe>
        </div>
      </div>

      <div class="cartMain" v-for="(item, index ) in CartList" :key="index" :num="item.skuNum">
        <div class="cartTitle">
          <van-checkbox v-model="item.isChecked" checked-color="#ee0a24" @click="goodsClick(item)">
            <div class="cartTitle1">全场换购</div>
          </van-checkbox>
          <div class="cartTitle2">已满一件,可选择10件商品换购</div>
          <div class="cartTitle3">
            <a href="">去换购 ></a>
          </div>
        </div>
        <!-- 滑动单元格 -->

        <div class="cartMiddle">

          <van-checkbox v-model="item.isChecked" class="checkboxChange" @click="goodsClick(item)"
            checked-color="#ee0a24">
          </van-checkbox>
          <van-swipe-cell>
            <van-card :price="item.cartPrice" :desc="item.sourceType" :title="item.skuName" class="goods-card"
              :thumb="item.imgUrl">

            </van-card>
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" @click="deleteOne(item.skuId)" />
            </template>
            <!-- 步进器 -->
            <van-stepper v-model="item.skuNum" min="1" max="100" @change="changestepper($event, item, item.id)"
              class="van-steppe" theme="round" button-size="22" />
          </van-swipe-cell>

        </div>
      </div>
      <!-- 底部结算区域 -->
      <!-- @click="allChecked"
      v-model="allCheck" -->
      <van-submit-bar :price="totalMoney" button-text="结算" @submit="onSubmit">
        <van-checkbox v-model="allCheck" ref="child" @click="allChecked" checked-color="#ee0a24">全选</van-checkbox>
        <!-- <template #tip>
          <span> {{ allCheck }}</span>
        </template> -->
      </van-submit-bar>

    </div>
    <!-- 购物车为空时展示 -->
    <div class="empty" v-else>
      <img src="http://yanxuan.nosdn.127.net/3a6c77d8463d8675f4a0a0c80dbe4391.png" alt="">
      <span>不过是些许风霜罢了</span>
    </div>
  </div>
  <Following />
</template>

<script setup lang=ts>
import type { CheckboxGroupInstance } from 'vant';
//引入方法
import { useRoute, useRouter } from 'vue-router'
import { ref, computed, watch, toRaw, toRef } from 'vue'
//引入api接口
import { reqCartList, reqLogin, reqChangeCart, reqAllChecked, reqDeleteOne, reqAllDelete } from '@/api/modules/cart'
import type { cartInfoListType, reqCartListType } from '@/api/modules/cart'
import emitter from "@/utils/eventBus";
// 购物车数据
let CartList = ref<cartInfoListType[]>([])
const checkboxGroupRef = ref<CheckboxGroupInstance>();
//购物车数据
const CartListData = async () => {
  try {
    const res = await reqCartList()
    CartList.value = res[0].cartInfoList

  } catch (error) {
  }
}
CartListData()

//跳转路由
const router = useRouter()
const onSubmit = () => {
  router.push({ name: 'Order' })
}

//单选

const goodsClick = async (item: { id: any; isChecked: any; }) => {
  const { id, isChecked } = item
  // console.log(id, isChecked)
  const newCheck = isChecked === true ? 1 : 0
  // console.log(id, newCheck)
  const res = await reqChangeCart(id, newCheck)
  item.isChecked = newCheck
}


//步数器
const value = ref(0)

const changestepper = ($event: any, item: { id: any; }, id: any) => {

  CartList.value.forEach(item => {
    return {
      id: item.id,
      skuNum: $event && item.skuNum
    }
  })
}
// const allCheck = computed({
//   get() {
//     return CartList.value.every(item => item.isChecked === 1)
//   },
//   async set(isEditClicked) {
//     if (isEditClicked) {
//       return
//     } else {
//       // 将所有的checked 变成 全选 或全不选
//       const isChecked = isEditClicked ? 1 : 0
//       let skuIdList: any[] = []
//       // 将选中商品添加进 skuIdList
//       CartList.value.forEach((item: { skuId: any; }) => skuIdList.push(item.skuId))
//       const res = await reqAllChecked(skuIdList, isChecked)

//       // 将本地的所有单选变成全选的checked状态
//       CartList.value.forEach((item: { isChecked: any; }) => (item.isChecked = isEditClicked))

//     }
//   }
// })
const isChecked = ref()
const allChecked = async () => {

  if (allCheck.value) {
    isChecked.value = 0
    const skuIdList: number[] = []
    // 将选中商品添加进 skuIdList
    CartList.value.forEach((item) => skuIdList.push(item.skuId))
    const res = await reqAllChecked(skuIdList, isChecked.value)
    CartListData()
    // console.log(res)
  } else {
    isChecked.value = 1
    const skuIdList: number[] = []
    // 将选中商品添加进 skuIdList
    CartList.value.forEach((item) => skuIdList.push(item.skuId))
    const res = await reqAllChecked(skuIdList, isChecked.value)
    CartListData()
  }
}


// 总价格
const totalMoney = computed(() => {
  let numMoney = 0
  CartList.value.forEach((item) => {
    if (item.isChecked) {
      numMoney += item.skuNum * item.skuPrice * 100
    }
  })
  return numMoney
})
emitter.emit("totalMoney", totalMoney)


//单个商品删除
const deleteOne = async (Id: number) => {
  if (confirm('你确定删除该商品吗？')) {
    const res = await reqDeleteOne(Id)
    try {
      CartList.value = CartList.value.filter((item: { skuId: any; }) => item.skuId !== Id)
    } catch (error) {
      console.log(error)
    }
  }
}
//登录

// const phone = ref('17322222222')
// const password = ref('17322222222')
// async function login() {
//   const res = await reqLogin(phone.value, password.value)
//   saveToken(res.data.token)
//   // 跳转到主页面
//   // 成功显示
//   // console.log('成功显示')
// }
// login()
watch(CartList.value, () => {
  CartListData()
})
const allCheck = computed(() => {

  return CartList.value.every(item => item.isChecked === 1)

})
</script>

<style>
.cartMain .van-card__price-integer {
  color: red;
}

.bad .van-swipe__indicator {
  overflow: hidden;
  width: 0;
  height: 0;
}

.bad .van-swipe-item {
  margin-right: -100px !important;
  /* width: 225px !important; */
  border-radius: 10px 10px 10px 10px;
  /* margin-right: -10px; */

}

.bad .van-swipe__track {
  transition-duration: 500ms;
  transform: translateX(100px);
  width: 200px;
}

.bad .van-card:not(:first-child) {
  margin-top: 0;
}

.bad {
  display: flex !important;
  flex-direction: row !important;
  white-space: nowrap;
  overflow: hidden;
  flex-wrap: wrap !important;
  align-items: center;
  padding-left: 10px;
}

.bad .van-swipe {
  width: 100%;
}

.bad .van-swipe-cell__wrapper {
  display: flex !important;
  height: 90px !important;
  padding-left: 10px !important;
  box-sizing: border-box !important;
}

.bad .van-card {
  position: relative;
  width: 255px;
}

.goods .van-card__bottom {
  margin-top: 20px !important;
  /* box-sizing: border-box !important; */
}

/* 调整图像大小(最好用百分比) */
.goods .van-card__img {
  width: 70px !important;
  height: 70px !important;
}

/* 调整左侧图像容器 - 使其贴近 */
.goods .van-card__thumb {
  margin-right: -44px !important;
  width: 70px !important;
  height: 70px !important;
  /*background-color: 70px !important;*/
}
</style>

<style lang="less" scoped>
.cartMiddle {
  display: flex;
}

:deep(.van-steppe) {
  position: absolute;
  right: 28px;
  bottom: 4px;
  z-index: 999;
}

.cart {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  width: 100%;

  background-color: #f4f4f4;
  padding-bottom: 148px;
  position: absolute;
}

.cartMain {

  margin: 25px 0;
  height: 150px;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: #FFFFFF;
  // box-sizing: border-box;
}

.cartTitle {
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 50px;
  padding: 0 10px;
  height: 50px;
  margin-top: -6px;
}

.cartTitle1 {
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.68267rem;
  color: #333333;
  font-size: 14px;
  // line-height: 24px;
}

.cartTitle2 {
  flex: 1;
  margin: 0 5px;
  font-size: 10px;
  text-align: right;
  color: #c2c0c0;
  white-space: nowrap;
  overflow: hidden;
  visibility: inherit;
}

.cartTitle3 {
  font-size: 10px;

}

.cartTitle3 a {
  color: #FA1E32;
}


.van-submit-bar {
  margin-bottom: 50px;

  .van-submit-bar__tip {
    display: flex;
    align-items: center;
  }
}

.checkboxChange {
  padding: 10px 10px 10px 10px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  height: 88px;

  /deep/.van-checkbox__label {
    flex: 1;
  }
}

.empty {
  // position: absolute;
  // left: 50%;
  // top: 50%;
  // transform: translate(-50%, -50%);
  margin-top: 10px;
  top: 0;
  width: 100%;
  height: 500px;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;

  img {
    width: 375px;
    height: 375px;
    border-radius: 50%;
    margin-bottom: 1px;
  }

  span {
    font-size: 12px;
    color: #333333;
    margin: 10px 0;
  }
}

.delete-button {
  height: 100%;
  margin-left: 2px;
}

.goods {
  width: 225px;
  background-color: #FAFAFA;
  height: 100px;
}

.c111 {
  padding: 0 10px;
}

.goods-card {
  margin-right: 15px;
  height: 90px;
}

.goods-card1 {
  width: 100px;
  height: 90px;
  padding-top: 34px;
}
</style>
